;$(function () {
  let $index = 1;
  $(".picimg ul").children().each(function (index, el) {
    $(el).on("mouseenter", function () {
      $(el).siblings().each(function (index, el) {
        $(el).removeClass("br")
      })
      $(el).addClass("br");
      $index = index + 1;
      console.log($index);
      $('.smllimg img').attr("src", `./imgs/dimg/200${index + 1}.png`);
      console.log(`"./imgs/dimg/200${index + 1}.png"`);
      $('.bigimg img').attr("src", `./imgs/dimg/200${index + 1}.png`);
    })
  })
  $(".tol").on("click", function () {
    if ($index == 1) {
      $index = 4;
      $(".picimg ul").children().eq(0).removeClass("br");
      $(".picimg ul").children().eq(3).addClass("br");
    } else {
      $index -= 1;
      $(".picimg ul").children().eq($index).removeClass("br");
      $(".picimg ul").children().eq($index - 1).addClass("br");
    }

    $('.smllimg img').attr("src", `./imgs/dimg/200${$index}.png`);

    $('.bigimg img').attr("src", `./imgs/dimg/200${$index}.png`);
    console.log($index)

  })
  $(".tor").on("click", function () {

    if ($index == 4) {
      $index = 1
    } else {
      $index += 1
    }
    $(".picimg ul").children().eq($index - 2).removeClass("br");
    $(".picimg ul").children().eq($index - 1).addClass("br");
    $('.smllimg img').attr("src", `./imgs/dimg/200${$index}.png`);

    $('.bigimg img').attr("src", `./imgs/dimg/200${$index}.png`);
    //console.log($index)
  })
})